import React, { useEffect, useState } from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import { colors, Divider } from '@material-ui/core';
import { IconAlternate } from 'components/molecules';
import { Section, Parallax } from 'components/organisms';
import {
  Welcome,
  Reviews,
} from './components';
import { setCovers, setReviews, setCoverMembers, setCoverBlog , setCoverShop, setCoverVoting, setCoverArtists, setCoverPodcasts , setSteamVideo} from 'redux/actions/CoverActions';
import { useSelector, useDispatch } from 'react-redux';
import { callGetApi , callGetNewsApi} from 'utils/networking';
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';

const useStyles = makeStyles(theme => ({
  root: {
    height: '100%',
    width: '100%',
    minHeight: '500px',
  },
  fullHeight: {
    width: '100%',
    height: '100%',
    minHeight: '100vh',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  disablePaddingTop: {
    paddingTop: 0,
  },
  scrollIcon: {
    background: 'transparent !important',
    border: `2px solid ${colors.amber[500]}`,
    cursor: 'pointer',
  },
  scrollTopIcon: {
    margin: '0 auto',
    marginBottom: theme.spacing(6),
    [theme.breakpoints.up('sm')]: {
      marginBottom: theme.spacing(12),
    },
  },
  madcapSection: {
    backgroundColor: '#0000008a',
  },
  adidasSection: {
    backgroundColor: '#003c0580',
  },
  larqSection: {
    backgroundColor: '#2d402f80',
  },
  nikeSection: {
    backgroundColor: '#5f3f3f80',
  },
}));

const Home = () => {
  const classes = useStyles();
  const dispatch = useDispatch();

  const coverList = useSelector((state) => state.cover.covers);
  const reviewList = useSelector((state) => state.cover.reviews);

  useEffect(() => {
    getServerSideProps();
    getServerVideoProps()
  }, [])

  const getServerSideProps = async () => {
    callGetApi('cover/covers_and_reviews', dispatch, (data) => {
      dispatch(setCovers(data.covers));
      dispatch(setReviews(data.reviews));
      dispatch(setCoverBlog(data.blog));
      dispatch(setCoverMembers(data.members));
      dispatch(setCoverArtists(data.artists));
      dispatch(setCoverPodcasts(data.podcasts));
      dispatch(setCoverShop(data.shop));
      dispatch(setCoverVoting(data.voting));
    });
  }
  const getServerVideoProps = async () => {
    callGetNewsApi('cover/steam_video', dispatch, (data) => {
      dispatch(setSteamVideo(data));
    });
  }

  const scrollTo = id => {
    setTimeout(() => {
      const element = document.querySelector(`#${id}`);
      if (!element) {
        return;
      }

      window.scrollTo({ left: 0, top: element.offsetTop, behavior: 'smooth' });
    });
  };

  return (
    <div className={classes.root}>
      {coverList.map((item, index) => (
        item.image ? (
          <Parallax
            key={index}
            backgroundImage={item.image}
            id={`section${index}`}
          >
            <div className={clsx(classes.fullHeight, classes.larqSection)}>
              <Section>
                <Welcome data={item} />
              </Section>
              <IconAlternate
                shape="circle"
                fontIconClass="fas fa-chevron-down"
                color={colors.amber}
                size="small"
                className={classes.scrollIcon}
                onClick={() => scrollTo(`section${index+1}`)}
                data-aos="fade-up"
              />
            </div>
          </Parallax>
        ) : (
          <div className={classes.fullHeight}
            key={index}
            id={`section${index}`}>
            <Section className={classes.disablePaddingTop}>
              <Welcome data={item} />
            </Section>
            <IconAlternate
              shape="circle"
              fontIconClass="fas fa-chevron-down"
              color={colors.amber}
              size="small"
              className={classes.scrollIcon}
              onClick={() => scrollTo(`section${index+1}`)}
            />
          </div>
        )
      ))}

      <Section id={`section${coverList.length}`}>
        <Reviews data={reviewList} />
      </Section>

      <IconAlternate
        shape="circle"
        fontIconClass="fas fa-chevron-up"
        color={colors.amber}
        size="small"
        className={clsx(classes.scrollIcon, classes.scrollTopIcon)}
        onClick={() => scrollTo('section0')}
        data-aos="fade-up"
      />
      <Divider />
    </div>
  );
};

export default Home;
